<template>
  <page title="教室资源状态图" :has-back="true">
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="2" align="middle" justify="center"><span class="center">选择教室</span></el-col>
        <el-col :span="4">
          <el-select v-model="room" placeholder="全部">
            <el-option label="全部" value="0"></el-option>
            <el-option
                v-for="item in rooms"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="find">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-calendar v-model="date">
            <template #dateCell="{data}">
              <template v-for="info in status(data.day)" :key="info">
                <div class="inner-box" :class="data.isSelected ? 'is-selected' : info.type" @click="changeDate(data.day)">
                  <div class="center">
                    {{ parseInt(data.day.split('-')[2],10) }}
                  </div>
                  <div class="center">
                    {{ info.msg }}
                  </div>
                </div>
              </template>
            </template>
          </el-calendar>
        </el-col>
        <el-col :span="8">.
          <el-scrollbar>
            <h1>预定详情</h1>
            <el-form label-position="top">
              <el-form-item label="上午">
                <template v-if="morning.length > 0">
                  <p v-for="(info,index) in morning" :key="index">
                    {{info.room}} 【{{info.name}}】 {{classroomStatus}}
                  </p>
                </template>
                <template v-else>
                  暂无教室被预定
                </template>
              </el-form-item>
              <el-form-item label="下午">
                <template v-if="afternoon.length > 0">
                  <p v-for="(info,index) in afternoon" :key="index">
                    {{info.room}} 【{{info.name}}】 {{classroomStatus}}
                  </p>
                </template>
                <template v-else>
                  暂无教室被预定
                </template>
              </el-form-item>
              <el-form-item label="晚上">
                <template v-if="evening.length > 0">
                  <p v-for="(info,index) in evening" :key="index">
                    {{info.room}} 【{{info.name}}】 {{classroomStatus}}
                  </p>
                </template>
                <template v-else>
                  暂无教室被预定
                </template>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </el-col>
      </el-row>
    </div>
  </page>
</template>

<script>
import Page from "@/components/Page";
import axios from "axios";
import moment from "moment";
export default {
  name: "ClassroomResources",
  components: {Page},
  data(){
    return {
      room: '0',
      rooms: [{
        id: 1,
        name: '培训教室'
      }, {
        id: 2,
        name: '多功能教室'
      }],
      date: moment(new Date()).format("YYYY-MM-DD"),
      curInfo:[],
      info:[
        // "2022-03-17":[
        //   {
        //     room:'报告厅教室',
        //     time:'',
        //     name:'垃圾分类项目1',
        //     status:'预订中'
        //   },{
        //     room:'报告厅教室',
        //     name:'垃圾分类项目2',
        //     status:'预订中'
        //   },{
        //     room:'报告厅教室',
        //     name:'垃圾分类项目3',
        //     status:'预订中'
        //   },
        //   {
        //     room:'报告厅教室',
        //     name:'垃圾分类项目',
        //     status:'预订中'
        //   },{
        //     room:'报告厅教室',
        //     name:'垃圾分类项目',
        //     status:'预订中'
        //   },
        //   {
        //     room:'报告厅教室',
        //     name:'垃圾分类项目',
        //     status:'预订中'
        //   },
        // ]
      ],
      classroomInfo:[]
    }
  },
  methods:{
    find(){
      this.getClassroomNeedDetailInDate(this.room,this.date).then(()=>{this.updateInfo()}).then(()=>{this.changeDate(this.date)})
    },
    status(date){
      let info = {type:'',msg:''}
      if(this.info[date]){
        info.msg = "有项目";
        info.type = "has-project"
      }else if(!this.checkDate(date)){
        info.msg = '不可预定';
      }else{
        info.msg = "空置";
      }
      return [info];
    },
    checkDate(date){
      let now = new Date();
      now.setHours(0,0,0,0);
      return moment(now).isSameOrBefore(moment(date));
    },
    changeDate(date){
      console.log(date);
      console.log(this.info[date]);
      if(this.info[date])
        this.curInfo = this.info[date];
      else
        this.curInfo = []
      console.log(this.curInfo);
    },
    findAllClassroom(){
      return axios.get(this.$host+"/classroom").then(response=>{
        if(response.data.code === 0){
          this.rooms = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    updateInfo(){
      this.info = [];
      this.classroomInfo.forEach((value)=>{
        let date = moment(value.date).format("YYYY-MM-DD");
        if(!this.info[date]){
          this.info[date] = [];
        }
        this.info[date].push(value);
      })
      console.log(this.info);
    },
    getClassroomNeedDetailInDate(classroomId,date){
      return axios.get(this.$host+"/classroom/need",{
        params:{
          classroomId:classroomId,
          date:moment(date).format("YYYY-MM")
        }
      }).then((response)=>{
        if(response.data.code === 0){
          this.classroomInfo = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
  },
  computed:{
    morning(){
      return this.curInfo.filter((value)=>{
        return value.time === '上午';
      })
    },
    afternoon(){
      return this.curInfo.filter((value)=>{
        return value.time === '下午';
      })
    },
    evening(){
      return this.curInfo.filter((value)=>{
        return value.time === '晚上';
      })
    },
    classroomStatus(){
      let now = moment(moment(new Date()).format("YYYY-MM-DD"));
      if(now.isBefore(moment(this.date))){
        return "预定中"
      }else if(now.isAfter(moment(this.date))){
        return "已完成"
      }else{
        return "使用中"
      }
    },
  },
  created() {
    this.findAllClassroom();
  }
}
</script>

<style scoped>
.container{
  padding-left: 20px;
}
.inner-box{
  width: 100%;
  height: 100%;
}
.has-project{
  background-color:rgb(242, 16, 18);
  color: white;
}
.is-selected {
  background-color: rgb(9, 134, 254);
  color: white;
}
</style>

<style>
.el-calendar-table .el-calendar-day {
  padding: 0;
}
</style>